<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { useMetadataStore } from '@/store/MetadataStore'
import {sendAndRequest} from '@/utils/SocketDUtil.js'

export interface DataSourceModel {
  url: string | null,
  username: string | null,
  password: string | null,
  type: string | null
}
interface descriptionsModel {
  label: string,
  value: object,
}
const metadataStore = useMetadataStore()

const dataSourceForm = ref()
const form = reactive({
  url: '',
  username: '',
  password: '',
  type: '',
  name: '',
  dbinfo: ''
})
const dbinfoList = ref()
let appContext = null;
onMounted(() => {
  appContext = getCurrentInstance()?.appContext.config.globalProperties
  // 初始化dbinfoList
  sendAndRequest('/datasource/dbinfoList').thenReply((reply:any)=>{
              dbinfoList.value = JSON.parse(reply.dataAsString())
      })
})
const dbVersion = ref<string>('')
const versionShow = ref(false)

const handleSubmit = ({ values, errors }) => {
  versionClear()
  sendAndRequest('/datasource/configDatabase',{
    'url': urlPrefix.value + form.url + urlSuffix.value,
    'username': form.username,
    'password': form.password,
    'type': form.type,
    'name': form.name
  }).thenReply((reply:any)=>{
        let resp = reply.dataAsString()
        versionShow.value = true
        dbVersion.value = resp
        metadataStore.clear()
        // 更新历史记录并选中
        sendAndRequest('/datasource/dbinfoList').thenReply((reply: any) => {
          dbinfoList.value = JSON.parse(reply.dataAsString())
          form.dbinfo = form.name
        })
  })
}

const handleReset = () => {
  dataSourceForm.value.resetFields()
  versionClear()
}
const versionClear = () => {
  versionShow.value = false
  dbVersion.value = ''
}
const urlPrefix = ref('')
const urlPlaceHolder = ref('')
const urlSuffix = ref('')
const dataSourceTypeChanged = (value) => {
  switch (value) {
    case "mysql":
      urlPrefix.value = "jdbc:mysql://"
      urlPlaceHolder.value = "ip:port/db"
      urlSuffix.value = "?useUnicode=true&characterEncoding=utf-8"
      break;
    case "oracle":
      urlPrefix.value = "jdbc:oracle:thin:@";
      urlPlaceHolder.value = "ip:port:db"
      urlSuffix.value = ""
      break;
  }
}
const dbinfoSelected = (value) => {
  let dbinfo = dbinfoList.value.find(it => it.name === value)
  form.url = dbinfo.url
  form.username = dbinfo.username
  form.password = dbinfo.password
  form.type = dbinfo.type
  form.name = dbinfo.name
}
</script>

<template>
  <div className='layout-basic-demo' class="border">
    <a-layout>
      <a-layout-content>
        <a-space>
          <a-form ref="dataSourceForm" :model="form" :style="{ width: '700px' }" @submit="handleSubmit"
            label-align="right">

            <a-form-item field="dbinfo" label="历史记录" >
              <a-select v-model="form.dbinfo" placeholder="请选择" @change="dbinfoSelected"
                :trigger-props="{ autoFitPopupMinWidth: true }">
                <a-option v-for="item in dbinfoList" v-bind:key="item.name">{{ item.name }}</a-option>
              </a-select>
            </a-form-item>

            <a-form-item field="name" label="name" required>
              <a-input v-model="form.name" placeholder="数据源名称"></a-input>
            </a-form-item>
            <a-form-item field="type" label="type" required>
              <a-select v-model="form.type" :style="{ width: '160px' }" placeholder="数据库" @change="dataSourceTypeChanged"
                :trigger-props="{ autoFitPopupMinWidth: true }">
                <a-option>mysql</a-option>
                <a-option>oracle</a-option>
              </a-select>
            </a-form-item>

            <a-form-item field="url" label="url" validate-trigger="input" required>
              <a-input v-model="form.url" :placeholder="urlPlaceHolder">
                <template #prefix>
                  {{ urlPrefix }}
                </template>
                <template #suffix>
                  <a-tooltip :content="urlSuffix">
                    <span class="auto-tooltip-content" :style="{ width: '100px' }">
                      {{ urlSuffix }}
                    </span>
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>
            <a-form-item field="username" label="username" validate-trigger="input" required>
              <a-input v-model="form.username" placeholder="登录用户名" />
            </a-form-item>
            <a-form-item field="password" label="password" validate-trigger="input" required>
              <a-input v-model="form.password" placeholder="登录密码" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button html-type="submit">配置数据源</a-button>
                <a-button @click="handleReset()">清空</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-space>
      </a-layout-content>
      <a-layout-sider>
        <a-result status="success" title="数据源信息" v-show="versionShow">
          <template #subtitle>
            {{ dbVersion }}
          </template>
        </a-result>
      </a-layout-sider>
    </a-layout>

  </div>
</template>

<style scoped>
.border {
  border: solid 1px white;
}

.auto-tooltip-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>